.foxui-videos-card {
    display: flex;
    flex-wrap: wrap;

    .foxui-videos-handle {
        padding: $--padding-base / 2;
    }

    .foxui-videos-handle-inner {
        width: $--videos-width-default;
        height: $--videos-height-default;
        overflow: hidden;
        border: $--border-width-base $--border-color-base dotted;
        border-radius: $--border-radius-base;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        cursor: pointer;
        position: relative;

        > .foxui-icon-jiahao-o {
            font-size: $--videos-icon-size-default;
            color: $--color-primary-light-3;
        }

        .text {
            text-align: center;
            margin-top: $--padding-small;
            color: $--videos-text-color-default;
        }
    }

    .foxui-videos-list {
        display: flex;
        flex-wrap: wrap;
        margin: -($--padding-base / 2);
    }

    .foxui-videos-item {
        padding: $--padding-base / 2;

        .content {
            border: $--border-base;
            width: $--videos-width-default;
            padding-bottom: $--videos-percentage;
            height: 0;
            overflow: hidden;
            position: relative;

            &::before {
                content: '';
                width: 100%;
                height: 100%;
                display: inline-block;
                background-color: #000;
                position: absolute;
                z-index: -1;
            }

            img {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 100%;
            }

            .duration {
                color: #fff;
                position: absolute;
                bottom: 0;
                right: $--padding-small;
                font-size: 12px;
            }

            .play,
            .replace,
            .delete {
                opacity: 0;
                transition: $--fade-transition;
            }

            .play {
                position: absolute;
                width: 100%;
                height: 100%;
                background-color: rgba($color: #000, $alpha: 0.7);

                i {
                    font-size: $--videos-icon-size-default;
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                    color: $--color-white;
                    border: solid #fff $--videos-play-border-width-default;
                    border-radius: 100%;
                    cursor: pointer;
                    width: $--videos-play-width-default;
                    height: $--videos-play-height-default;

                    &::before {
                        position: absolute;
                        top: 50%;
                        left: 52%;
                        transform: translate(-50%, -50%);
                    }
                }
            }

            .replace {
                position: absolute;
                bottom: 0;
                background-color: rgba($color: #707070, $alpha: 1);
                color: rgba($color: #fff, $alpha: 1);
                width: 100%;
                font-size: 14px;
                text-align: center;
                cursor: pointer;
            }

            .delete {
                position: absolute;
                top: -2px;
                right: -2px;
                font-size: 24px;
                color: rgba($color: #707070, $alpha: 1);
                cursor: pointer;
                z-index: 1;

                &::after {
                    content: '';
                    display: inline-block;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    width: 18px;
                    height: 18px;
                    background-color: #fff;
                    border-radius: 100%;
                    z-index: -1;
                }
            }

            &:hover {
                .play,
                .replace,
                .delete {
                    opacity: 1;
                }
            }
        }

        .foxui-videos-title {
            margin-top: $--padding-small;
            width: $--videos-width-default;
            height: 32px;
            line-height: 32px;
            font-size: 13px;
        }
    }
}

.foxui-videos-medium {
    .foxui-videos-handle {
        .foxui-videos-handle-inner {
            width: $--videos-width-medium;
            height: $--videos-height-medium;
        }

        > .foxui-icon-jiahao-o {
            font-size: $--videos-icon-size-medium;
        }
    }

    .foxui-videos-item {
        .content {
            width: $--videos-width-medium;

            .duration {
                display: none;
            }

            .play {
                i {
                    font-size: $--videos-icon-size-medium;
                    width: $--videos-play-width-medium;
                    height: $--videos-play-height-medium;
                    border-width: $--videos-play-border-width-medium;
                }
            }
        }

        .foxui-videos-title {
            width: $--videos-width-medium;
            height: 32px;
            line-height: 32px;
            font-size: 13px;
        }
    }
}

.foxui-videos-small {
    .foxui-videos-handle {
        .foxui-videos-handle-inner {
            width: $--videos-width-small;
            height: $--videos-height-small;
        }

        > .foxui-icon-jiahao-o {
            font-size: $--videos-icon-size-small;
        }

        .text {
            font-size: $--font-size-small;
        }
    }

    .foxui-videos-item {
        .content {
            width: $--videos-width-small;

            .duration {
                display: none;
            }

            .play {
                i {
                    font-size: $--videos-icon-size-small;
                    width: $--videos-play-width-small;
                    height: $--videos-play-height-small;
                    border-width: $--videos-play-border-width-small;
                }
            }
        }

        .foxui-videos-title {
            width: $--videos-width-small;
            height: 28px;
            line-height: 28px;
            font-size: 12px;
        }
    }
}

.foxui-videos-fluid {
    min-width: 200px;

    .foxui-videos-card {
        .foxui-videos-list {
            .foxui-videos-item {
                width: 100%;

                .content {
                    width: 100%;

                    .duration {
                        bottom: 3.4%;
                    }
                }

                .foxui-videos-title {
                    width: $--videos-width-fluid;
                    height: 36px;
                    line-height: 36px;
                    font-size: 14px;
                }
            }
        }
    }

    .foxui-videos-handle {
        width: $--videos-width-fluid;
    }
}

// 播放视频弹出框
.foxui-videos-play__container {
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    background-color: #000;
    position: relative;
    overflow: hidden;

    video {
        width: 100%;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
}
